<template>
  <div>
    <div class="top_search">
      <!-- 顶部搜索框 -->
      <div class="top">
        <div class="search">
          <div
            class=".h_icon iconfont icon-xitongfanhui"
            @click.prevent="$router.push('/#')"
          ></div>
          <input
            type="text"
            placeholder="圣诞"
            v-model="keywords"
          />
          <div class="iconfont icon-sousuo" @click.stop="getSearchFun"></div>
        </div>
      </div>

      <!-- 搜索历史 -->
      <div class="history">
        <p>历史</p>
        <ul>
          <li v-for="(item, index) in historylist" :key="index" @click.stop="add(item)">
            {{ item }}
            <span class="iconfont icon-shanchu2" @click.stop="del(index)"></span>
          </li>
        </ul>
        <div class="del">
          <span class="iconfont icon-shanchu1" @click="clearHistorylist"></span>
        </div>
      </div>

      <!-- 关键字提示 -->
      <div class="keycenter" v-show="flag">
        <div class="center">
          <ul>
            <li
              v-for="item in this.hintlists"
              :key="item.id"
              @click="add(item.name)"
            >
              <div class="one iconfont icon-sousuo"></div>
              <div class="two">{{ item.name }}</div>
              <!-- <div class="three">比听歌曲</div> -->
            </li>
          </ul>
        </div>
      </div>

      <div class="result_list" v-show="!flag">
        <ul>
          <li
            v-for="(item, index) in searchlist"
            :key="item.id"
            class="border-bottom"
            @click="setIdt(item.id)"
          >
            <div class="num">{{ index + 1 }}</div>
            <div class="pylst_mess">
              <p>{{ item.name }}</p>
              <p v-for="(el, index) in item.ar" :key="index">
                <span>{{ el.name }}</span>
              </p>
            </div>
            <div class="player_icon">
              <span class="iconfont icon-bofang"></span>
            </div>
          </li>
        </ul>
      </div>

      <!-- 专区 -->
      <div class="special">
        <!-- 热搜榜 -->
        <div class="hot_search">
          <div class="hot_title">
            <p class="con">热搜榜</p>
            <!-- <p>讨论榜</p>
          <p>视频榜</p>
          <p>播客榜</p> -->
          </div>
          <div class="hot_center">
            <ul>
              <li
                v-for="(item, index) in hotlist"
                :key="index"
                @click="add(item.first)"
              >
                <span>{{ index + 1 }}</span> {{ item.first }}
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getSearch, getDefault, getHot } from "../../api/search";
export default {
  created() {
    getHot().then((data) => {
      console.log(data)
      this.hotlist = data.result.hots;
    });
  },
  props: ["first"],
  data() {
    return {
      flag: false,
      hintlists: null, //关键字提示
      keywords: "", //输入框内容
      searchlist: [], //搜索结果
      historylist: [], //历史搜索
      timeout: null,
      hotlist:null,
    };
  },

  mounted() {
    if (localStorage.getItem("keywords") !== null) {
      this.historylist = JSON.parse(localStorage.getItem("keywords")) || []; //先读取local里存储历史记录
    }
  },

  methods: {
    del(i) {
      this.historylist.splice(i, 1);
      localStorage.setItem("keywords", JSON.stringify(this.historylist));
    },

    //清空历史记录
    clearHistorylist() {
      localStorage.clear();
      this.historylist = [];
    },
    add(name) {
      this.keywords = name;
    },

    // 点击搜索
    getSearchFun() {
      if (!this.keywords.trim()) return; //如果搜索框内容为空，则不执行
      //将搜索记录存储本地
      if (this.historylist.indexOf(this.keywords) === -1) {
        this.historylist.unshift(this.keywords); //向数组添加搜索记录
        this.historylist = this.historylist.slice(0, 15); //保留数据量
        localStorage.setItem("keywords", JSON.stringify(this.historylist)); //setItem(键名keywords,将value存储到key字段)
      }
      clearTimeout(this.timeout);
      //避免频繁请求
      this.timeout = setTimeout(() => {
        // this.historylist.push(this.keywords);
        //请求搜索结果数据
        getSearch({ keywords: this.keywords }).then((data) => {
          this.searchlist = data.result.songs;
          console.log(data);
        });

        this.flag = false;
      }, 1000);
    },

    setIdt(id) {
      this.$emit("se-idt", id);
    },
  },

  watch: {
    //监听输入框的值请求关键字
    keywords(newValue) {
      // console.log(newValue);
      if (!this.keywords.trim()) {
        this.flag = false;
        this.hintlists = this.searchlist = "";
        return;
      } else {
        this.flag = true;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          getDefault({ keywords: newValue }).then((data) => {
            this.hintlists = data.result.songs;
          });
        }, 300);
      }
    },
  },
};
</script>

<style lang="less">
.top_search {
  width: 100%;
  height: 100%;
  //   position: relative;
  .top {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    box-sizing: border-box;
    padding: 0px 16px;
    padding-top: 25px;
    background-color: #fff;
    .search {
      width: 100%;
      display: flex;
      height: 38px;
      line-height: 38px;
      justify-content: space-between;
      .h_icon {
        width: 26px;
      }
      .iconfont {
        font-size: 22px;
      }
      input {
        width: 78%;
        font-size: 14px;
        border: none;
        border-bottom: 1px solid #c0c0c0;
        box-sizing: border-box;
      }
    }
  }

  .history {
    display: flex;
    width: 100%;
    padding: 0px 16px;
    margin-top: 73px;
    box-sizing: border-box;
    font-size: 14px;
    p {
      padding: 8px 0;
      margin-right: 10px;
    }
    ul {
      flex: 1;
      display: flex;
      width: auto;
      overflow-x: auto;
      white-space: nowrap;
      flex-flow: row nowrap;
      li {
        padding: 8px 9px;
        border-radius: 20px;
        background-color: #f3f3f3;
        margin-right: 10px;
        .iconfont {
          font-size: 13px;
          color: #c0c0c0;
        }
      }
    }

    ul::-webkit-scrollbar {
      display: none;
    }
    .del {
      width: 40px;
      height: 36px;
      line-height: 36px;
      background-color: #fff;
      text-align: right;
    }
  }

  .keycenter {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5;
    top: 63px;
    background-color: #fff;
    ul {
      padding-left: 16px;
      li {
        display: flex;
        height: 49px;
        line-height: 49px;
        border-bottom: 1px solid #f7f7f7;
        font-size: 14px;
        .one {
          width: 24px;
        }
        .two {
          color: #b2b2b2;
        }
        .three {
          color: #181818;
        }
      }
    }
  }

  .result_list {
    width: 100%;
    margin-top: 20px;
    position: absolute;
    // top: 0;
    z-index: 4;
    background: #fff;
    ul li {
      display: flex;
      padding: 10px 18px 10px 18px;
      .num {
        width: 5%;
        text-align: center;
        line-height: 38px;
        margin-right: 16px;
        color: #999;
      }
      .pylst_mess {
        flex: 1;
        p {
          width: 80%;
          font-size: 17px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        p:nth-of-type(2) {
          font-size: 12px;
          color: #888;
        }
      }
      .player_icon {
        width: 30px;
        line-height: 38px;
        .iconfont {
          font-size: 25px;
        }
      }
    }
  }

    .special {
    position: relative;
    z-index: 3;
    .hot_search {
      .hot_title {
        margin-top: 17px;
        display: flex;
        padding: 0px 16px;
        justify-content: space-between;
        p {
          color: #6e6e6e;
        }
        p.con {
          color: #1d1d1d;
        }
      }
    }

    .hot_center {
      padding: 0px 16px;
      margin-top: 10px;
      box-shadow: 0px 0px 0px red;
      ul {
        width: 100%;
        display: flex;
        // flex-wrap: wrap;
        flex-direction: column;
        li {
          // width: 50%;
          margin-top: 10px;
          color: #454545;
          span {
            color: #a3a3a3;
          }
        }
        li:nth-of-type(-n + 3) {
          font-weight: 500;
          color: #1d1d1d;
        }
        li:nth-of-type(-n + 3) span {
          color: red;
        }
      }
    }

    // .music_center {
    //   width: 100%;
    //   padding: 0 16px;
    //   margin-top: 15px;
    //   box-sizing: border-box;
    //   h3 {
    //   }
    //   ul {
    //     display: flex;
    //     flex-wrap: wrap;
    //     li {
    //       width: 50%;
    //       margin-top: 10px;
    //     }
    //   }
    // }
  }
}
</style>
